<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <title>工作台</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div id="app">
    <div class="echart-box">
      <div class="echart-left">
        <div class="echart-item">
          <div class="title">
            <p class="text">调休请假统计</p>
            <p class="text1">[更多]</p>
          </div>
          <div class="choose">
            <p class="choose-text">年度：</p>
            <select name="" id="select">
              <option value="">2015</option>
              <option value="">2016</option>
              <option value="">2017</option>
              <option value="">2018</option>
              <option value="">2019</option>
            </select>
          </div>
          <div id="main" style="width: 100%;height: 50vh;margin-top: -3vh"></div>
        </div>
        <div class="echart-item echart-item1">
          <div class="title">
            <p class="text">待办</p>
            <p class="text1">[更多]</p>
          </div>
          <div class="item-box">
            <div class="item">
              <div class="item-left">
                <img src="./images/pic.png" alt="">
                <p class="text">技术部张媛媛出差申请1</p>
              </div>
              <p class="right">[03-03]</p>
            </div>
            <div class="item">
              <div class="item-left">
                <img src="./images/pic.png" alt="">
                <p class="text">技术部张媛媛出差申请2</p>
              </div>
              <p class="right">[03-03]</p>
            </div>
            <div class="item">
              <div class="item-left">
                <img src="./images/pic.png" alt="">
                <p class="text">技术部张媛媛出差申请3</p>
              </div>
              <p class="right">[03-03]</p>
            </div>
            <div class="item">
              <div class="item-left">
                <img src="./images/pic.png" alt="">
                <p class="text">技术部张媛媛出差申请4</p>
              </div>
              <p class="right">[03-03]</p>
            </div>
            <div class="item">
              <div class="item-left">
                <img src="./images/pic.png" alt="">
                <p class="text">技术部张媛媛出差申请5</p>
              </div>
              <p class="right">[03-03]</p>
            </div>
            <div class="item">
              <div class="item-left">
                <img src="./images/pic.png" alt="">
                <p class="text">技术部张媛媛出差申请6</p>
              </div>
              <p class="right">[03-03]</p>
            </div>
          </div>
        </div>
      </div>
      <div class="echart-right">
        <div class="right-top">
          <img src="./images/head.png" alt="">
          <div class="msg">
            <div class="msg-item">
              <p class="left">姓名: 张伟</p>
              <p class="right">工龄: 20</p>
            </div>
            <div class="msg-item">
              <p class="left">性别: 男</p>
              <p class="right">电话: 1300000000</p>
            </div>
            <div class="msg-item">
              <p class="left">所在部门: 技术部</p>
              <p class="right">邮箱: 123456789@qq.com</p>
            </div>
            <div class="msg-item">
              <p class="left">岗位: 开发管理部</p>
              <p class="right">政治面貌: 党员</p>
            </div>
          </div>
        </div>
        <div class="echart-item echart-item2">
          <div class="title">
            <p class="text">个人自助</p>
            <p class="text1">[更多]</p>
          </div>
          <div class="btn-box">
            <div class="btn-item">入职须知</div>
            <div class="btn-item">个人信息</div>
            <div class="btn-item">员工短期培训申请</div>
            <div class="btn-item">培训项目申请</div>
            <div class="btn-item">工资查看</div>
            <div class="btn-item">五险二金办理</div>
            <div class="btn-item">休假申请</div>
            <div class="btn-item">调休申请</div>
            <div class="btn-item btn-item1">下载中心</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="./js/index.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    },
    created() {
      console.log("vue")
    },
    mounted() {
      var myChart = echarts.init(document.getElementById('main'));
      option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          x: '10%',
          y: '17%',
          x2: '2%',
          y2: '20%',
          borderWidth: 1,
          borderColor: '#eeeeee',
        },
        legend: {
          data: ['调休', '请假'],
          right: 30,
          itemWidth: 15,
          itemHeight: 15,
          padding: 10
        },
        // calculable: true,
        xAxis: [{
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          name: '调休',
          type: 'bar',
          itemStyle: {
            normal: {
              color: '#5382b9'
            }
          },
          data: [10, 11, 15, 20, 30, 10, 15, 20, 50, 70, 90, 100],
        }, {
          name: '请假',
          type: 'bar',
          barGap: '0%',
          itemStyle: {
            normal: {
              color: '#cf8d48'
            }
          },
          data: [1, 6, 7, 10, 20, 5, 8, 12, 30, 50, 70, 80],
        }]
      };
      myChart.setOption(option);
    },
    methods: {

    },
  })
</script>

</html>